<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="static/js/echarts-gl.min.js"></script>
    <script src="static/js/jquery.min.js"></script>
</head>
 
<body>
<div align="center">
<h2>用户音乐推荐系统</h2>

    <form action="/direct" method="POST">

        <input type="text" name="userID" placeholder="put usernameID">
        <br>
        <!--<input type="password" name="password" placeholder="password"> -->
        <br>
        <input type="submit" value="Submit">
       <!-- <input type="reset" value="reset"> -->
    </form>
</div>
<div align="center">
 <h3>为{{userid}}用户推荐音乐家 </h3>
 </div>
    <a href="/">Return</a>
    
    <br>
    <br>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="genre-critic" style="width: 1000px;height:550px;"></div>
    <script type="text/javascript">
            $.getJSON("static/data/predict.json", d => {
            console.log(d);
             var name = d.map(v => v['name']);
             var targe = []
             
             for (var i =0; i<d.length;i++){
             targe.push( {value: d[i].prediction , name: d[i].name });
             }
             console.log(targe);
             
             
                // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('genre-critic'), 'light');
  option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        data: name

    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
                position: 'inner',
                fontSize: 14,
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 10, name: '推荐前十位音乐家'},
            ]
        },
        {
            name: '推荐指数',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
                length: 30,
            },
            label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                
                rich: {
                    a: {
                        color: '#6E7079',
                        lineHeight: 22,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#8C8D8E',
                        width: '100%',
                        borderWidth: 1,
                        height: 0
                    },
                    b: {
                        color: '#4C5058',
                        fontSize: 14,
                        fontWeight: 'bold',
                        lineHeight: 33
                    },
                    per: {
                        color: '#fff',
                        backgroundColor: '#4C5058',
                        padding: [3, 4],
                        borderRadius: 4
                    }
                }
            },
            data: targe
        }
    ]
};
 
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
</script>
</body>
</html>
